<template>
    <el-card shadow="never">
        <div class="title_box">
            <div>触发员工列表</div>
            <el-button plain :disabled="!isShow" @click="onExportExcel">导出</el-button>
        </div>
        <el-divider />
        <div class="customer_list_search">
            <el-form :inline="true" :model="formData" label-width="auto">
                <div class="item_box">
                    <el-form-item label="筛选员工">
                        <el-select
                            v-model="formData.work_user_ids"
                            popper-class="zw-hide_select_option"
                            :popper-append-to-body="false"
                            multiple
                            placeholder="全部员工"
                            @click="openDepart"
                            @change="changeDepart">
                            <el-option
                                v-for="item in creators"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <div class="btn_box">
                            <el-button type="primary" @click="getstatdetailListFun">查询</el-button>
                            <el-button @click="onReset">清空</el-button>
                        </div>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="customer_list_search" style="padding: 0">
            <div v-if="tableData.length">
                <el-table
                    :data="tableData"
                    row-key="id"
                    stripe
                    class="table-box"
                    header-row-class-name="table_header_title"
                    @sort-change="sortChange"
                    @selection-change="handleChange"
                    @select-all="handleAll">
                    <el-table-column :reserve-selection="true" type="selection" width="55" />
                    <el-table-column width="160" label="员工信息">
                        <template #default="scope">
                            <div class="avatar-box">
                                <el-image
                                    class="avatar"
                                    :src="
                                        scope.row.work_user.avatar ||
                                        'https://img-scrm-dev.keyid.cn/keyid-scrm-server/avatar/cust_default.png'
                                    "></el-image>
                                <span class="name">{{ scope.row.work_user.name }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        width="220"
                        label="首次触发时间"
                        prop="first_trigger_time"
                        sortable></el-table-column>
                    <el-table-column
                        width="220"
                        label="最后触发时间"
                        prop="last_trigger_time"
                        sortable></el-table-column>
                    <el-table-column width="160" label="触发次数" prop="trigger_times" sortable></el-table-column>
                    <el-table-column min-width="160" label="触发人数" prop="trigger_nums" sortable></el-table-column>
                    <el-table-column label="操作" width="220px" fixed="right">
                        <template #default="scope">
                            <div class="btn-box">
                                <div @click="toDetail(scope.row)">触发详情</div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-empty v-else image="/static/noData.png" description="暂无数据"></el-empty>
        </div>
    </el-card>
    <ZWPagination ref="PaginationRef" @submit="pageChangeFun" />
    <!-- 部门人员弹框 -->
    <ZWDepart ref="DepartRef" @submit="getDepart" />
    <!--触发详情-->
    <ZWDrawer ref="ZWref"> <triggerDetails ref="triggerRef"></triggerDetails> </ZWDrawer>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps, nextTick, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from '@/store';
import ZWPagination from '@/components/ZWPagination.vue';
import ZWDepart from '@/components/ZWDepart.vue';
import { getSetionId } from '@/utils/utils';
import ZWDrawer from '@/components/ZWDrawer.vue';
import triggerDetails from './triggerDetails.vue';
import { executorList, excutorExport } from '@/api/employe/staffsupervision/timeoutreplay';
const ZWref = ref(null);
const DepartRef = ref(null);
const triggerRef = ref(null);
const router = useRouter();
const store = useStore();
const creators = ref([]);
const props = defineProps(['timeoutId']);
const PaginationRef = ref<any>(null);
const selectIds: any = ref([]);
const isShow = ref(false);
const tableData = ref([]);
const formData: any = reactive({
    work_user_ids: [],
    order_column: '',
    sort: '',
    page: 1,
    page_size: 15
});
//导出
const onExportExcel = () => {
    const params = {
        timeout_remind_rule_id: props.timeoutId,
        work_user_list: selectIds.value
    };
    excutorExport(params).then((res: any) => {
        window.location = res;
    });
};
//清空
const onReset = () => {
    (formData.work_user_ids = []),
        (formData.order_column = ''),
        (formData.sort = ''),
        (formData.page = 1),
        (formData.page_size = 15);
    creators.value = [];
    getstatdetailListFun();
};
//触发详情
const toDetail = (val: any) => {
    ZWref.value.drawer = true;
    ZWref.value.title = '触发详情';
    ZWref.value.width = 1000;
    ZWref.value.isShow = false;
    nextTick(() => {
        triggerRef.value.getInfo(val, props.timeoutId);
    });
};
// 当前分页改变
const pageChangeFun = (val: any) => {
    formData.page = val.page;
    formData.page_size = val.page_size;
    getstatdetailListFun();
};
// 统计详细数据
const getstatdetailListFun = (data?: any) => {
    const params = {
        timeout_remind_rule_id: props.timeoutId,
        work_user_list: formData.work_user_ids,
        order_column: formData.order_column,
        sort: formData.sort,
        page: formData.page,
        page_size: formData.page_size
    };
    executorList(params).then((res: any) => {
        tableData.value = res.data;
        store.dispatch('pageTotal', res.total);
    });
};
//打开新建选择人
const openDepart = () => {
    DepartRef.value.selectedMember = [...creators.value];
    DepartRef.value.departVisble = true;
};
// 获取部门成员
const getDepart = (res: any) => {
    creators.value = res;
    formData.work_user_ids = getSetionId('id', creators.value);
};
const changeDepart = (data: any) => {
    const removeDepart = creators.value.find((item: any) => !data.includes(item.id));
    const arr: any[] = creators.value.filter((item: any) => data.includes(item.id));
    formData.work_user_ids = getSetionId('id', arr);
    creators.value = arr;
    DepartRef.value.removeItem(removeDepart);
};
//排序
const sortChange = (val: any) => {
    if (val.order == 'ascending') {
        formData.sort = 'asc';
    } else {
        formData.sort = 'desc';
    }
    formData.order_column = val.prop;
    getstatdetailListFun();
};
const handleChange = (val: any) => {
    val.length > 0 ? (isShow.value = true) : (isShow.value = false);
    selectIds.value = getSetionId('work_user_id', val);
};
const handleAll = (val: any) => {
    val.length > 0 ? (isShow.value = true) : (isShow.value = false);
    selectIds.value = [];
};
watch(
    () => props.timeoutId,
    val => {
        if (val) {
            getstatdetailListFun();
        }
    }
);
</script>

<style lang="scss" scoped>
:deep.el-tag.el-tag--warning {
    margin-right: 10px;
}

:deep.el-card {
    margin-top: 20px;
}

.title_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-divider {
    margin-top: 8px;
    margin-bottom: 16px;
}

#echarts {
    display: flex;
    justify-content: center;
    height: 320px;
}

.empty_img {
    transform: translateX(13%);
}

.customer_list_search {
    padding: 16px;
    margin: 20px 0;
    background-color: #f9f9f9;

    .el-form-item {
        margin-bottom: 0;
    }

    .item_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.table-box {
    .avatar-box {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 4px;
        }

        .name {
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #33302d;
            max-width: 90px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            margin: 0 10px;
        }
    }

    .btn-box {
        text-align: left;

        div {
            cursor: pointer;
            display: inline-block;
            vertical-align: middle;

            // width: 80px;
            height: 32px;
            background: #fff;
            border: 1px solid #eaeaea;
            text-align: center;
            line-height: 32px;
            margin: 0 6px 5px;
            min-height: 28px;
            padding: 0 15px;
            font-size: 12px;
            border-radius: calc(var(--el-border-radius-base) - 1px);
        }
    }
}

:deep(.el-table--layout-fixed .el-table__header-wrapper tr th.el-table-fixed-column--right) {
    background-color: #f9f9f9;
}
</style>
